<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <link href="../static/css/mypage.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/mypage.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<!--我的音乐-->
<div class="headerbg" style="background-image: url(/img/background_2.jpg)">
    <div class="geRenZiLiao">
        <div class="touxiang">
            <img th:src="${user.getUser_headurl()}"  style="width: 100px;height: 100px;border-radius: 50px" class="img-circle txborder">
        </div>
        <h3 class="mingzijuzhong" th:text="${user.getUser_name()}">用户名</h3>
    </div>
</div>

<div class="" style="width: 95%">
    <br>
    <div class="liebiao" id="contentBody" style="margin-left: 5%">
        <ul class="nav nav-tabs" id="musicNav">
            <li role="presentation" class="MusicSelect active" id="Mymusic" >
                <a href="#" class="lbbar" data-stat="">
                    <span class="glyphicon glyphicon-th" onclick="getMusic(1)">我的音乐</span>
                </a>
            </li>
            <li role="presentation" class="MusicSelect" id="MymusicList">
                <a href="#" class="lbbar" data-stat="">
                    <span class="glyphicon glyphicon-calendar" onclick="musicList(1)">我的歌单</span>
                </a>
            </li>
        </ul>
        <!--我-->
        <div id="content-music">
        </div>
        </div>
    </div>
</div>
</body>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script language='javascript' th:inline="javascript">
    getMusic(1);
    // 确定导航栏的状态：active
    function activeClass() {
        var musicNav = document.getElementById("musicNav").getElementsByTagName("li");
        var index=0;
        for(var i=0;i<musicNav.length;i++){
            musicNav[i].num=i;
            musicNav[i].onmouseover=function(){
                Change(this.num);
            }
        }
        function Change(curIndex){
            for(var i=0;i<musicNav.length;i++){
                musicNav[i].className="";
            }
            musicNav[curIndex].className="active";
            index=curIndex;
        }
    }
    //获取我的歌单的方法
    function musicList(pageNum) {
            activeClass();
            $('#content-music').remove();
            var content_div = '<div id="content-music"></div>';
            $('#contentBody').append(content_div);
            var content_big4CL = '<div id="music-LIST" class="">\n' +
                '    <div class="gedan" style="width: 100%">\n' +
                '        <div class="xiaodaohang" style="width: 100%">\n' +
                '            <span style="font-size: 30px;font-family: 华文新魏">我 的 歌 单</span>\n' +
                '            <main>\n' +
                '                <div class="album py-5 bg-light">\n' +
                '                    <div class="container">\n' +
                '                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-6" id="musilList">\n' +

                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            <div aria-label="Page navigation example" style="text-align: center;margin-top: 10px;margin-left: 45%">\n' +
                '               <ul class="pagination" id="PageInfo">'+
                '               </ul>\n' +
                '             </div>'+
                '             <!--去创建按钮-->\n' +
                '            <a href="#" style="margin-top: 10px">\n' +
                '                <span><a href="/musiclistCreat" class="bi bi-pencil-fill">去创建</a></span>\n' +
                '            </a>\n' +
                '            </main>' +
                '        </div>\n' +
                '    </div>\n' +
                '</div>';
            $('#content-music').append(content_big4CL);
            $.ajax({
                type:"get",
                url:BaseURL+"getMusicListByUser/?pageNum="+pageNum,
                dataType:"json",
                success:function (data) {
                    var musinData = data.data.list;
                    var PageData = data.data;
                    console.log(musinData);
                    for (var i=0;i<musinData.length;i++){
                        var li = (' <div class="col">\n' +
                            '        <div class="card shadow-sm" style="width: 200px;margin: 5px">\n' +
                            '    <a href="/musiclistShow/'+musinData[i]["list_id"]+'">\n' +
                            '            <img src="'+musinData[i]["list_photourl"]+'" width="200" height="200">\n' +
                            '            <p class="card-text">'+musinData[i]["list_name"]+'</p>\n' +
                            '            <div class="d-flex justify-content-between align-items-center">\n' +
                            '                <small class="text-muted"><span style="font-size: 8px;color: #777;display: block;">播放量：<span>'+musinData[i]["list_sum"]+'</span></span></small>\n' +
                            '            </div>\n' +
                            '    </a>\n' +
                            '    <div class="btn-group" style="margin-left: 0;width: 40%">\n' +
                            '        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deleteMusicList(&quot;'+musinData[i]["list_id"]+'&quot)">View</button>\n' +
                            '        <button type="button" class="btn btn-sm btn-outline-secondary"><a href="/musiclistCreat/?musiclistId='+musinData[i]["list_id"]+'">编辑</a></button>\n' +
                            '    </div>'+
                            '        </div>\n' +
                        '</div>');
                        $("#musilList").append(li);
                    }
                    if (PageData["hasPreviousPage"]){
                        var previous = '<li class="page-item">\n' +
                            '    <a class="page-link" href="javascript:void(0)" onClick="musicList('+(pageNum-1)+')">上一页</a>\n' +
                            '</li>';
                        $('#PageInfo').append(previous);
                    }
                    for (var i=1;i<=PageData["pages"];i++) {
                        $('#PageInfo').append('<li class="page-item"><a class="page-link" href="javascript:void(0)" onClick=\'musicList('+i+')\'>'+i+'</a></li>')
                    }
                    if (PageData["hasNextPage"]) {
                        var next = ' <li class="page-item">\n' +
                            '    <a class="page-link" href="javascript:void(0)" style="cursor: pointer" onClick=\'musicList('+(pageNum+1)+')\'>下一页</a>\n' +
                            '</li>';
                        $('#PageInfo').append(next);
                    }
                }
            })
        }
    //获取我的音乐的方法
    function getMusic(pageNum) {
            activeClass();
            $('#content-music').remove();
            var content_div = '<div id="content-music"></div>';
            $('#contentBody').append(content_div);
            var MyMusinBg = '<div class="big4 gedan">\n' +
                '    <div class="xiaodaohang">\n' +
                '        <span style="font-size: 30px;font-family: 华文新魏">我 的音乐</span>\n' +
                '        <div class="clearfix" style="height: 500px">\n' +
                '            <table style="width: 1200px;margin: auto; overflow: auto;">\n' +
                '                <thead>\n' +
                '                <tr style="border-bottom: 1px solid #919191;line-height: 35px;">\n' +
                '                    <th style="text-align: left;font-size: 15px">歌名</th>\n' +
                '                    <th style="text-align: left;font-size: 15px">歌手</th>\n' +
                '                    <th style="text-align: left;font-size: 15px">发布日期</th>\n' +
                '                    <th style="text-align: left;font-size: 15px">播放</th>\n' +
                '                    <th style="text-align: left;font-size: 15px">操作</th>\n' +
                '                </tr>\n' +
                '                </thead>\n' +
                '                <tbody style="font-size: 16px" id="tbody">\n' +

                '                </tbody>\n' +
                '            </table>\n' +
                '        </div>\n' +
                '        <div aria-label="Page navigation example" style="text-align: center;margin-top: 10px;margin-left: 20%">\n' +
                '           <ul class="pagination" id="PageInfo">'+
                '           </ul>\n' +
                '         </div>'+
                '        <!--去创建按钮-->\n' +
                '        <a href="#" style="margin-top: 10px">\n' +
                '            <span class="btn-outline"><a href="/musicupload" class="bi bi-pencil-square">去发布</a></span>\n' +
                '        </a>\n' +
                '    </div>\n' +
                '</div>';
            $('#content-music').append(MyMusinBg);
            $.ajax({
                type:"get",
                url:BaseURL+"music/getMyMusic/?pageNum="+pageNum,
                dataType:"json",
                success:function (data) {
                    var DataList = data.data.list;
                    var DataPage = data.data;
                    console.log(DataPage)
                    for (var i=0;i<DataList.length;i++){
                        var tr = $('<tr>\n' +
                            '    <th style="text-align: left;font-size: 15px">'+DataList[i]["music_name"]+'</th>+\n' +
                            '    <th style="text-align: left;font-size: 15px">'+DataList[i]["music_author"]+'</th>+\n' +
                            '    <th style="text-align: left;font-size: 15px">'+DataList[i]["music_creatdate"]+'</th>+\n' +
                            '    <th style="text-align: left;font-size: 15px"><a class="bi bi-caret-right-fill" href="/musicruning/'+DataList[i]["music_id"]+'"></a></th>+\n' +
                                '<th style="text-align: left;font-size: 15px">\n' +
                            '         <button type="button" class="btn btn-danger" onclick="deleteMusic(&quot;'+DataList[i]["music_id"]+'&quot)">删除</button>\n' +
                            '    </th>'+
                            '</tr>+');
                        $('#tbody').append(tr);
                    }
                    if (DataPage["hasPreviousPage"]){
                        var previous = '<li class="page-item">\n' +
                            '    <a class="page-link" href="javascript:void(0)" onClick="getMusic('+(pageNum-1)+')">上一页</a>\n' +
                            '</li>';
                        $('#PageInfo').append(previous);
                    }

                    for (var j=1;j<=DataPage["pages"];j++) {
                        $('#PageInfo').append('<li class="page-item"><a class="page-link" href="javascript:void(0)" onClick=\'getMusic('+j+')\'>'+j+'</a></li>')
                    }

                    if (DataPage["hasNextPage"]) {
                        var next = ' <li class="page-item">\n' +
                            '    <a class="page-link" href="javascript:void(0)" style="cursor: pointer" onClick=\'getMusic('+(pageNum+1)+')\'>下一页</a>\n' +
                            '</li>';
                        $('#PageInfo').append(next);
                    }
                }
            })

    }
    //删除我的音乐
    function deleteMusic(musicId) {
        console.log(musicId);
        var music = {
            "music_id":musicId
        };
        $.ajax({
            type:"post",
            url:BaseURL+"music/deleteMusic",
            data:JSON.stringify(music),
            contentType : 'application/json',
            dataType:"json",
            success:function (data){
                console.log(data);
                alert(data.msg);
                window.location.href = BaseURL+"mypage"
            }
        })

    }
    //编辑我的歌单方法
    function deleteMusicList(musinId) {
        console.log(musinId);
        var musiclist = {
            "list_id":musinId
        };
        $.ajax({
            type:"post",
            url:BaseURL+"deleteMusicList",
            dataType:"json",
            data:JSON.stringify(musiclist),
            contentType : 'application/json',
            success:function (data){
                alert(data.msg);
                window.location.href = BaseURL+"mypage"
            }
        })
        }
</script>

</html>